<template>
  <el-row type='flex' justify='center' align='middle' class='wrapper'>
    <!-- 设置登录表单 -->
  <el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="用户名">
    <el-input v-model="form.username" ref="username"></el-input>
  </el-form-item>
  <el-form-item label="密码">
    <el-input type='password' v-model="form.password"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="loginBtn">登录</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  mounted() {
    this.$refs.username.focus()
  },
  methods: {
    // 登录请求
    loginBtn() {
      // 判断账户密码输入为空
      if (this.form.username == '' || this.form.password == '') {
        this.$message({
          // 提示消息
          message: '请输入用户名或密码',
          // 提示类型
          type: 'success'
        })
        return
      }
      // console.log(this.form)
      this.$axios({
        url: '/login',
        method: 'post',
        data: this.form
      }).then(res => {
        // 结构数据 将用户信息存进本地
        console.log(res.data)
        const { data, message } = res.data
        if (message == '登录成功') {
          localStorage.setItem('token', data.token)
          localStorage.setItem('user', JSON.stringify(data.user))
          // 登录成功提示
          this.$message({
            message: message,
            type: 'success'
          })
          // 跳转到首页页面
          setTimeout(() => {
            this.$router.push({
              path: '/'
            })
          }, 2000)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.wrapper {
  background-color: skyblue;
  height: 100vh;
  .el-input {
    width: 30.33vw;
  }
}
</style>
